import React, {Component} from 'react'
import {View, Text, ScrollView, StyleSheet, Image, Dimensions,TouchableOpacity} from 'react-native'
import LoadingCommon from '../common/loading_common'
import Icon from 'react-native-vector-icons/Ionicons'
import styles from '../../config/styles'
var {height, width} = Dimensions.get('window')
import ScrollableTabView from 'react-native-scrollable-tab-view'
import { VictoryBar, VictoryChart, VictoryAxis, VictoryVoronoiContainer } from 'victory-native';
import NavigatorService from '../../config/navigate_service'
import LinearGradient from 'react-native-linear-gradient';
import Badge from '../common/badge';
import {getOneClassroomReport} from '../../config/api'





class Symbol extends Component {
    static navigationOptions = ({ navigation }) => {
        let options = {
            title: '自学统计',
            headerRight: <View />
        }
        return options
    }

    constructor (props) {
        super(props)
        this.state = {
            classId: props.navigation.state.params.classId,
            loading: false,
            error_phonograms: []

        }
    }

    componentDidMount (){
        this.getData()
    }

    getData = () => {

        getOneClassroomReport(this.state.classId).then((data)=>{
            if(data.code==0){
                this.setState({
                    error_phonograms:data.error_phonograms
                })
            }
        });

    }

    render () {
        const self = this;
        const {navigation} = this.props
        const error_phonograms = this.state.error_phonograms

        if (this.state.loading) {
            return <LoadingCommon />
        } else {
            return (
                <ScrollView>

                    <View style={[styles.main_body]}>
                        {
                            error_phonograms.map((error_phonogram,index)=>{
                                return <View style={[styles.symbol_item]} key={index}>
                                            <View style={[styles.symbol_item_hd]}><Text style={{fontSize:16}}>{error_phonogram.name_zh}</Text></View>
                                                <View style={[styles.symbol_item_list]}>

                                                        {error_phonogram.phonograms.map((phonogram,index)=>{
                                                            return <View style={[styles.sy_list_item]} key={index}>
                                                                        <View style={[styles.sy_badge]}>
                                                                            <View>
                                                                                <Text style={{fontSize: 12, color: 'white'}}>{phonogram.error_count}</Text>
                                                                            </View>
                                                                        </View>
                                                                        <LinearGradient colors={['#f9f9f9', '#e9e9e9']} style={[styles.sy_box]}>
                                                                            <Text style={{fontSize:28,backgroundColor:'rgba(0,0,0,0)'}}>{phonogram.phonogram_name}</Text>
                                                                        </LinearGradient>
                                                                        <TouchableOpacity onPress={() => navigation.navigate('symbol_detail_show',{id:self.state.classId,phonogram_code:phonogram.phonogram_code})} style={[styles.sy_detail_button]}><Text style={{fontSize:13,color:'#999999'}}>查看</Text></TouchableOpacity>
                                                                    </View>
                                                        })
                                                    }
                                            </View>
                                        </View>
                            })
                        }
                    </View>


                </ScrollView>
            )
        }

    }
}

export default Symbol